{{define "template/manage.html" }}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>


</head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/static/css/index.css">
<style>
    body {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
</style>

</head>

<body>
<div id="app">

    <el-container>
        <el-header title="顶栏">
            <el-row :gutter='20'>
                <el-col :span="4" style="text-align: center;">
                    <img src="/static/images/logo.png" alt="" width="100px">
                    <h1 style="display: inline;">Blogo</h1>
                </el-col>
                <el-col :span="16" style="line-height: 63px;">
                    <el-input v-model="input" placeholder="请输入想查询的内容"></el-input>
                </el-col>
                <el-col :span="4" style="line-height: 63px; text-align: center;">
                    <el-dropdown  @command="handleCommand">
                            <span class="el-dropdown-link">
                                ${user.user_nick}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="jumpFront">返回前台</el-dropdown-item>
                            <el-dropdown-item command="jumpNewPost">发布博客</el-dropdown-item>
                            <el-dropdown-item command="signOut" divided>注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
            <div class="line"></div>

        </el-header>

        <el-container style="margin-top: 40px;">
            <el-aside width="fit-content" title="侧导航栏" style="margin-top: 20px;">
                <!-- <div v-if="isCollapse">
                <el-button icon="el-icon-s-fold" @click="handleCollapse"></el-button>
                </div>
                <div v-else>
                    <el-button icon="el-icon-s-unfold" @click="handleCollapse"></el-button>
                </div> -->
                <el-switch style="margin-left:22px;margin-bottom: 10px;" v-model="isCollapse"
                           active-color="#13ce66"></el-switch>

                <el-menu default-active="2-1" class="el-menu-vertical-demo" @open="handleOpen"
                         @close="handleClose" :collapse="isCollapse">
                    <el-menu-item index="1" @click="jumpFront">

                        <i class="el-icon-s-home"></i>
                        <span slot="title">前台</span>

                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span slot="title">管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" @click="jumpContentManage">内容管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-container>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{path: '/'}"><a href="/blogo/dashboard/page">首页</a>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-main title="操作内容">
                        <template>
                            <el-table v-loading="loading" :data="tableData" border style="width: 100%">
                                <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
                                </el-table-column>
                                <el-table-column pro-table-column prop="title" label="标题" width="120">
                                </el-table-column>
                                <el-table-column pro-table-column prop="update_time" label="修改时间" width="120">
                                </el-table-column>
                                <el-table-column pro-table-column prop="author" label="作者" width="120">
                                </el-table-column>
                                <el-table-column pro-table-column prop="likes" label="点赞次数" width="120">
                                </el-table-column>
                                <el-table-column pro-table-column prop="views" label="查看次数" width="120">
                                </el-table-column>
                                <el-table-column pro-table-column prop="category" label="分类" width="120">
                                </el-table-column>
                                <el-table-column pro-table-column prop="tags" label="标签" width="120">
                                </el-table-column>
                                <el-table-column pro-table-column prop="summary" label="概述" width="400">
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="200">
                                    <template slot-scope="scope">
                                        <el-button @click="view(scope.row)" type="text" size="small">查看
                                        </el-button>
                                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small" >删除</el-button>

                                        <el-button type="text" size="small">编辑</el-button>

                                    </template>


                                </el-table-column>

                            </el-table>

                        </template>


                    </el-main>
                    <el-footer>
                        <template>
                            <el-pagination @current-change="handleCurrentChange" background :page-size="page_size"
                                           layout="total, prev, pager, next"
                                           :total="total">
                            </el-pagination>
                        </template>
                    </el-footer>

                </el-container>
            </el-main>
        </el-container>
    </el-container>

    <el-drawer
            :title="title"
            :visible.sync="drawer"
            direction="rtl"
            size="50%"
            :before-close="handleClose1">
        <span v-html="content"></span>
        <el-link :href="blogurl" type="primary">在前台预览<el-link>
    </el-drawer>
</div>

<!-- <div id="editor"></div> -->


</body>
<!-- <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script> -->
<!-- import Vue before Element -->
<script src="/static/js/Vue.js"></script>
<!-- import JavaScript -->
<script src="/static/js/index.js"></script>
<script src="/static/js/marked.min.js"></script>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script>

    let Main = new Vue({
        el: "#app",
        delimiters: ['${', '}'],
        data: {
            isCollapse: false,
            input: "",
            user: {
                user_nick: "Liang Chao"
            },
            blogurl: "",
            tableData: [{
                id: "1",
                date: '2016-05-02',
                title: "发i飞机",
                update_time: "2021-11-9",
                author: "Liang Chao",
                likes: 1,
                views: 100,
                category: "GO",
                tags: "tag1, tag2",
                summary: "",
                content: ""
            }],
            total: 100,
            page_size: 10,
            loading: false,
            drawer: false,
            content: "",
            title: "",
        },
        methods: {
            handleOpen(key, keyPath) {
                // alert(key, keyPath)
            },
            handleClose(key, keyPaht) {
                // alert(key, keyPath)
            },
            handleClick(row) {
                console.log(row)
            },
            jumpFront() {
                alert("http://blog.liangchao.top/blogo/blog/page")
                location.href = "http://blog.liangchao.top/blogo/blog/page"
            },
            jumpContentManage() {
                let token = localStorage.getItem("token")
                location.href = `/blogo/dashboard/content-manage?token=${token}`
            },
            signout() {
                /*设置token失效*/
                localStorage.setItem("token", null)
                location.href = "/login/page"
            },
            transferTableData(blogs) {
                let tableData = []
                blogs.forEach((item) => {
                    let row = {
                        id: item.blog_id,
                        date: item.create_time_str,
                        title: item.blog_title,
                        update_time: item.update_time_str,
                        author: item.author_name,
                        likes: item.blog_likes,
                        views: item.blog_views,
                        category: item.blog_category_name,
                        tags: item.blog_tags,
                        summary: item.blog_summary,
                    }
                    tableData.push(row)
                })
                return tableData
            },
            getBlogs(page, page_size) {
                let tableData = []
                let total
                $.ajax({
                    url: `/blogo/blog/query/${page}/${page_size}`,
                    async: false,
                    type: "get",
                    dataType: "json",
                    success: (res) => {
                        tableData = this.transferTableData(res.data.blogs)
                        total = res.data.total
                        this.loading = false

                    }
                })
                this.tableData = tableData
                this.total = total

            },
            goBack() {
                let token = localStorage.getItem("token")
                location.href = `/blogo/dashboard/page?token=${token}`
            },
            handleCurrentChange(val) {
                this.loading = true
                setTimeout(()=>{},1000)
                this.getBlogs(val, this.page_size) // flush blog table
            },
            handleCollapse() {
                console.log("hhhh")
                this.isCollapse = this.isCollapse === true ? false : true
            },
            handleCommand(message) {
                let token = localStorage.getItem("token")

                if (message === "jumpFront") {
                    window.location.href = "http://blog.liangchao.top"
                }
                if (message === "jumpNewPost") {
                    location.href = "/blogo/blog/new/page" + "?token=" + token
                }

                if (message === "signOut") {
                    this.signout()
                }

            },
            deleteRow(index, rows) {

                let id = rows[index].id
                let count = 0
                let token = localStorage.getItem("token")

                this.$confirm("此操作将永久删除这篇博客，是否继续", "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    $.ajax({
                        url: `/blogo/blog/delete?id=${id}&token=${token}`,
                        type: "delete",
                        async: false,
                        success: (res) => {
                            if (res !== null && res.code === 200) {
                                count = res.data.count
                            } else {
                                count = 0
                            }
                        },
                    })

                    if (count === 0) {
                        this.$message.error('删除失败')
                    }else{

                        this.getBlogs(this.page, this.pagesize)
                        rows.splice(index, 1)
                        this.$message.success(`删除了${count}条数据`)
                    }

                }).catch(() => {
                    this.$message.error("已取消删除")
                })
            },
            view(row) {
                let id = row.id
                this.title = row.title
                let content, blogurl
                let token = localStorage.getItem("token")
                this.drawer = true
                $.ajax({
                    url: `/blogo/blog/${id}?token=${token}`,
                    type: "get",
                    async: false,
                    success: (res) => {
                        content = res.data.blog_content
                        blogurl = "https://blogo.liangchao.top" + res.data.blog_sub_url
                    },
                })

                this.content = marked(content)
                this.blogurl =  blogurl

            },
            handleClose1(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }

        },
        created: function () {
            this.getBlogs(1, this.page_size) // 获取
        }
    })
</script>

</html>

{{end}}